<template>
    <div>
        <el-select v-model="modelValue.variableValue"
                   :placeholder="propJson.placeHolder"
                   :style="execClass"
                   :size="propJson.size"
                   :clearable="propJson.isClearable"
                   :info="selectOption"
                   :disabled="propJson.isDisable"
                   :filterable="propJson.isFilterable"
                   :multiple="propJson.isMultiple"
                   :collapse-tags="propJson.isMultiple && propJson.isCollapseTags"
                   :collapse-tags-tooltip="propJson.isMultiple && propJson.isCollapseTags && propJson.isCollapseTagsTooltip"
                   :max-collapse-tags="propJson.isMultiple && propJson.isCollapseTags ? propJson.maxCollapseTags : ''"
                   @click="selectClick()"
                   @change="selectChange()">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>

<script name="SelectComponent" setup lang="ts">
import {getCommonParamObj} from "@/utils/commonParamUtil";
import jsonpath from "jsonpath";
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {computed, defineProps} from "vue";
import {ref} from "vue";
import {useRouter} from "vue-router";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let options = ref([])

let router = useRouter();

let execClass = computed(() => {
    let resStyle = "width: 100%;"
    if (propJson.value.editFlag) {
        resStyle += "pointer-events: none;";
    }
    return resStyle;
})

let modelValue = computed(() => {
    let bindVariable= propJson.value.bindVariable;
    // 获取全局变量中的值
    return getCommonParamObj(commonParam.value, bindVariable)
})

let selectOption = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    if (propJson.value.isClickAction) {
        return;
    }
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execThen, execCatch, null)
})

function execThen(resValue) {
    // 根据返回的结果解析label和value
    let optionsList = []
    for (let i = 0; i < resValue.length; i++) {
        let op = {label: "", value: ""}
        let info = resValue[i]
        let opLabel = jsonpath.query(info, propJson.value.optionLabel)
        let opValue = jsonpath.query(info, propJson.value.optionValue)
        if (opLabel.length > 0 && opValue.length > 0) {
            op.label = opLabel[0]
            op.value = opValue[0]
            optionsList.push(op)
        }
    }
    options.value = optionsList
}
function execCatch(resValue) {

}

function execChangeThen(awaitObj) {
    // 判断是否需要在下拉改变后重新加载页面
    if (propJson.value.isReloadPage && awaitObj.res) {
        router.go(0)
    }
}

async function selectChange() {
    if (!propJson.value.isAddChangeAction) {
        return;
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(propJson.value.changeAction, awaitObj, commonParam.value, execChangeThen, ()=>{}, awaitObj);
}

async function selectClick() {
    if (propJson.value.editFlag) {
        return;
    }
    if (!propJson.value.isClickAction) {
        return;
    }
    await doThirdServiceValue(propJson.value.actionInfo, commonParam.value, execThen, execCatch, null)
}
</script>

<style scoped lang="less">

</style>